<template>
  <div id="newsDetails">
    <div>
      <!--<img src="@/assets/image/online8.png" width="100%">-->
      <img
        src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bannermc5.png"
        class="banner"
      />
    </div>

    <div class="news-container" v-html="newsInfo"></div>
  </div>
</template>

<script>
import THeader from "@/components/t-header";
export default {
  name: "news-details",
  components: {
    THeader,
  },
  asyncData({ route, store, $api }) {
    let sid = store.state.sid;
    let id = route.query.id;
    return $api
      .getNewsInfo(sid, id)
      .then((res) => {
        store.commit("setNewInfo", res.articleData.content);
      })
      .catch((res) => {
        // this.$message({
        //   showClose: true,
        //   message: '获取数据失败',
        //   type: 'error'
        // })
      });
  },
  computed: {
    newsInfo() {
      return this.$store.state.newsInfo;
    },
  },
  created() {},
};
</script>

<style scoped lang="scss">
#newsDetails {
  .banner {
    width: 100%;
  }
  .news-container {
    width: 117rem;
    margin: 8.4rem auto;
    padding: 0 3rem;
    .title,
    .date {
      font-size: 2rem;
      line-height: 2.6rem;
    }
    .title {
      color: #000;
    }
    .date {
      color: #444;
      margin-bottom: 4.4rem;
    }
    .news-img {
      text-align: center;
      margin: 3rem;
    }
    p {
      font-size: 1.4rem;
      line-height: 1.9rem;
      color: #444;
    }
  }
}
@media screen and (max-width: 750px) {
  .news-img {
    img {
      width: 100%;
    }
  }
}
</style>
